<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- {{firstname}}{{lastname}} -->
    {{fullname}}-{{fullname}}
    <hr>
    {{getfullname}}-{{getfullname()}}
  </div>

  <script>


    var vm = new Vue({
      el: "#app",
      data: {
        firstname: 'han',
        lastname: 'ye',
        person: {
          username: "hanye",
          age: 18,
          address: "beijing china"
        }
      },
      computed: {
        //计算属性会有缓存
        fullname() {
          console.log('computed fullname')
          return this.firstname + this.lastname;
        }

        // fullname: {
        //   get() {
        //     return this.firstname + this.lastname;
        //   },
        //   set(name) {
        //     this.lastname = name;
        //   }
        // }
      },
      methods: {
        //每次调用都会执行
        getfullname() {
          console.log('method getfullname')
          return this.firstname + this.lastname;
        }
      },
      mounted() {
        // setTimeout(() => {
        //   this.lastname = "sai"
        // }, 2000)
      },
      //监测data数据的变化
      watch: {
        lastname(newval, oldval) {
          console.log(newval, oldval)
        },
        // person(newval, oldval) {
        //   console.log(newval, oldval)
        // }
        person: {
          handler() {
            console.log('person change..')
          },
          //对象内部值得变化，数组的 变化 不需要这么做
          deep: true,
          //设置为true之后,回调函数会被立即触发
          immediate: true
        }
      }
    })

  </script>

</body>

</html>